<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom操作</title>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>$(function(){
        //内部插入 => 子节点
        $(".append").click(function(){
            // $("ul").append("<li>列表 append</li>")加后面
            $("<li>ss</li>").appendTo($("ul"))
        })
        $(".prepend").click(function(){
            $("ul").prepend("<li>列表 prepend</li>") //加前面

        })
        //外部插入=> 兄弟节点
        $(".befor").click(function(){
            //上面
            $("ul").before("<li>列表 before</li>") 
        })
        $(".after").click(function(){
            //下面
            $("ul").after("<li>列表 after</li>") 
        })
        //包裹 => 父节点
        $(".wrap").click(function(){
            //父节点
            $("ul").wrap("<div style='color:red'></div>") 
        })
        //替换
        $(".rep").click(function(){
            //替换位置              替换内容
            $("li:first").replaceWith("<li>列表 new</li>") 
        })
        //删除
        $(".empty").click(function(){
            //删除内容
            $("li:first").remove() 
        }) 
         $(".clone").click(function(){
             // 复制内容   复制     复制到的位置
            $("li:first").clone().appendTo($("ul"));
        })
        //基础事件 加载页面时候已经有的
        // $("li").click(function(){
        //      console.log($(this).text()) // 如果突然多了一个li 操作不到
        // })
        //高级事件  事件处理 事件委托
        // 前面确定父节点了 后面直接写li 不能写 ul 里的li
        $("ul").on("click","li",function(){
        // 父节点     事件   子元素  
            console.log($(this).text())
        })
        //多个事件  空格隔开
       // $("ul").on("click dbclick","li",function(){
       //     console.log($(this).text())
     //   })
        //live 
    })</script>
</head>
<body>
    <button class="append">append</button>
    <button class="prepend">prepend</button>
    <br>
    <button class="befor">before</button>
    <button class="after">after</button>
    <br>
    <button class="wrap">wrap</button>
    <button class="rep">rep</button>
    <br>
    <button class="empty">删除empty</button>
    <button class="remove">删除remove</button>
    <button class="clone">clone</button>
   
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
    </ul>
</body>
</html>